import { useState } from "react";
import IconFont from "@/components/IconFont";
// 自定义排序组件
const CommonTableSort = ({ value, title, defaultValue = null, defaultSorts = [null, "desc", "asc"], onClick }) => {
	const [order, setOrder] = useState(defaultValue);
	function toggleOrder() {
		const currentIndex = defaultSorts.indexOf(order);
		const nextIndex = (currentIndex + 1) % defaultSorts.length;
		setOrder(defaultSorts[nextIndex]);
		onClick && onClick(defaultSorts[nextIndex]);
	}

	function isRef(variable) {
		return variable && typeof variable === "object" && "current" in variable;
	}
	const style = {
		marginLeft: "4px"
	};

	return (
		<span onClick={toggleOrder}>
			{title}
			<span style={{ ...style }}>
				<IconFont
					type={
						(isRef(value) ? value.current : value) === "desc"
							? "iconpaixu"
							: (isRef(value) ? value.current : value) === "asc"
								? "icona-paixu1"
								: "icona-paixu2"
					}
				/>
			</span>
		</span>
	);
};

export default CommonTableSort;
